<template>
    <div class="app-container">
        <!-- 搜索 -->
        <div class="search-container" ref="search">
            <el-form :model="search" size="default" inline>
                <el-form-item label="商户名称">
                    <el-input v-model="search.sub_unit_name" placeholder="请输入商户名称"></el-input>
                </el-form-item>
                <el-form-item label="是否关水">
                    <el-select v-model="search.is_water" placeholder="请选择" clearable>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否关电">
                    <el-select v-model="search.is_electric" placeholder="请选择" clearable>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否关气">
                    <el-select v-model="search.is_gas" placeholder="请选择" clearable>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否关门">
                    <el-select v-model="search.is_door" placeholder="请选择" clearable>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期">
                    <el-date-picker v-model="search.value" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="changeTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDataList(1)">搜索</el-button>
                    <el-button type="success" @click="onDownExcel">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never">
            <el-table :data="dataInfo.list" :height="pageHeight + 'px'"
                :default-sort="{ prop: 'id', order: 'ascending' }" v-loading="dataLoading">
                <el-table-column label="执行日期" prop="exec_date"></el-table-column>
                <el-table-column label="区域" width="210">
                    <template #default="scope">
                        <span> {{ scope.row.region_name }} > {{ scope.row.area_name }} </span>
                    </template>
                </el-table-column>
                <el-table-column label="社会单位" width="200">
                    <template #default="scope">
                        <span> {{ scope.row.unit_name }} > {{ scope.row.sub_unit_name }} </span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="社区名" prop="area_name"></el-table-column>  -->
                <el-table-column label="提交人" prop="user_name"></el-table-column>
                <el-table-column label="是否关门" prop="is_door">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.is_door === 1">已关</el-tag>
                        <el-tag type="danger" v-else>未关</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否关电" prop="is_electric">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.is_door === 1">已关</el-tag>
                        <el-tag type="danger" v-else>未关</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否关气" prop="is_gas">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.is_gas === 1">已关</el-tag>
                        <el-tag type="danger" v-else>未关</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否关水" prop="is_water">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.is_water === 1">已关</el-tag>
                        <el-tag type="danger" v-else>未关</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="图片" prop="is_water">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px"
                            :src="`http://api.huojisuan.com${scope.row.check_images[0]}`"></el-image>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="社会单位审核人员" prop="unit_verify_user_name"></el-table-column>
                <el-table-column label="商户审核人员" prop="sub_unit_verify_user_name"></el-table-column> -->
                <!-- 1已审核 0 未审核 -->
                <el-table-column label="商户审核" prop="sub_unit_verify_time">
                    <template #default="scope">
                        <div>
                            {{
                scope.row.sub_unit_verify_status == 0
                    ? '待审核'
                    : scope.row.sub_unit_verify_status == 1
                        ? '通过'
                        : '未通过'
            }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="社会单位审核" prop="unit_verify_time">
                    <template #default="scope">
                        <div>
                            <div>
                                {{
                scope.row.unit_verify_status == 0 ? '待审核' : scope.row.unit_verify_status == 1 ? '通过'
                    :
                    '未通过'
            }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="拒绝原因" prop="reasons"> </el-table-column>
                <!-- <el-table-column width="150">
                    <template #header>
                        <el-button size="small" type="primary" @click="add">添加</el-button>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->

                <el-table-column label="创建日期" prop="create_time">
                    <template #default="scope">
                        <div>{{ $getTime(scope.row.create_time) }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.unit_verify == 1 || scope.row.sub_unit_verify == 1" >
                            <el-button size="small" type="danger" disabled>已审核</el-button>
                        </div>
                        <div v-else>
                            <el-popconfirm confirm-button-text="通过" cancel-button-text="不通过" icon="el-icon-info"
                                icon-color="red" title="确定审核通过？" @confirm="passOrCancel(scope.row, true)"
                                @cancel="passOrCancel(scope.row, false)">
                                <template #reference>
                                    <el-button size="small" type="danger">审核</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <!-- <el-pagination @current-change="handleCurrentChange" :current-page="dataInfo.page"
                        :page-count="dataInfo.total_page" :total="dataInfo.total"
                        layout="total,prev, pager, next, jumper" background></el-pagination> -->


                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="dataInfo.page" :page-count="dataInfo.total_page" :page-sizes="[10, 20, 50, 100]"
                    :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="dataInfo.total" background>
                </el-pagination>
            </div>
        </el-card>
        <!-- <el-dialog
            :title="dialogTitle"
            v-model="dialogFormVisible"
            :close-on-click-modal="false"
            @close="closeDialog"
        >
            <el-form :model="formData">
                <el-row>
                    社会单位选择
                    <el-col :span="6" :offset="1">
                        <el-form-item label="社会单位选择" prop="unit_id">
                            <el-select v-model="formData.unit_id" placeholder="请选择">
                                <el-option
                                v-for="item in societyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        经纬度
                        <el-form-item label="单位坐标" prop="longitude">
                            <div style="display: flex; align-item: center;">
                                <el-input
                                style="width: 40%; margin-right: 1%;"
                                disabled
                                v-model="formData.longitude"
                                ></el-input>
                                <el-input
                                style="width: 40%; margin-right: 1%;"
                                disabled
                                v-model="formData.latitude"
                                ></el-input>
                                <el-button @click="getLatLng">定位</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    网格选择
                    <el-col :span="6" :offset="1">
                        <el-form-item label="网格选择" prop="area_id">
                            <el-cascader
                                v-model="formData.area_id"
                                :options="interLists"
                                @change="handleChange"
                                :props="cascaderProps"
                                :emitPath="false"
                                :disabled="disabled"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </template>
        </el-dialog> -->
        <!-- 分页 -->
    </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    // 分页
    mixins: [paginationMixin],
    data() {
        return {
            search: {
                sub_unit_name: '',
                sta_time: '',
                end_time: ''
            },
            searchValue: '',
            // 总页数
            total: 0,
            dataInfo: {
                list: []
            },
            dataLoading: false,
            // 列表
            dataList: [{ name: 1 }],
            pageHeight: 0
            // 模态框显示隐藏
            // dialogFormVisible: false,
            // formLabelWidth: '120px',
            // // 模态框标题
            // dialogTitle: '',
            // // 提交数据
            // formData: {
            //     longitude: '',  // 经度
            //     latitude: '',   // 纬度
            // }
        }
    },
    created() {
        this.getDataList()
    },
    mounted() {
        this.pageHeight = window.innerHeight - this.$refs.search.clientHeight - 205;
    },
    methods: {
        handleSizeChange(e) {
            this.pagination.size = e;
            this.getDataList()
        },
        onDownExcel() {
            this.$api
                .post(
                    '/unit/MyXf/listsExcl',
                    {},
                    {
                        responseType: 'blob'
                    }
                )
                .then((res) => {
                    const blob = new Blob([res], {
                        type: 'application/vnd.ms-excel'
                    })

                    if (window.navigator.msSaveOrOpenBlob) {
                        //兼容IE10
                        navigator.msSaveBlob(blob, '导出文件.xlsx')
                    } else {
                        const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
                        const a = document.createElement('a') //创建a标签
                        a.style.display = 'none'
                        a.href = href // 指定下载链接
                        a.download = '导出文件.xlsx' //指定下载文件名
                        a.click() //触发下载
                        URL.revokeObjectURL(a.href) //释放URL对象
                    }
                })
        },
        passOrCancel(row, bool) {
            let query = {}
            if (bool) {
                query = {
                    id: row.id,
                    status: 1
                }
                this.$api
                    .post('/unit/MyXf/verify', query)
                    .then((res) => {
                        this.getDataList()
                    })
                    .finally(() => { })
            } else {
                ElMessageBox.prompt('填写拒绝原因', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^.+$/,
                    inputErrorMessage: '不能为空'
                })
                    .then(({ value }) => {
                        query = {
                            id: row.id,
                            status: 2,
                            reasons: value
                        }
                        this.$api
                            .post('/unit/MyXf/verify', query)
                            .then((res) => {
                                this.getDataList()
                            })
                            .finally(() => { })
                    })
                    .catch(() => { })
            }
        },
        changeTime() {
            if (this.search.value) {
                this.search.sta_time = this.search.value[0]
                this.search.end_time = this.search.value[1]
            } else {
                this.search.sta_time = ''
                this.search.end_time = ''
            }
        },
        handleCurrentChange(e) {
            this.getDataList(e)
        },
        // 获取数据
        getDataList(page = 1) {
            // 分页
            this.dataLoading = true
            let query = {
                rows: this.pagination.size,
                page: page,
                ...this.search,
                id: this.$route.query.id,
            }
            this.$api
                .post('/unit/MyXf/Lists', query)
                .then((res) => {
                    this.dataInfo = res.data
                })
                .finally(() => {
                    this.dataLoading = false
                })
        },
        // 搜索
        searchInputList() {
            this.getDataList()
        }
        // 修改
        // edit(row) {
        //     this.dialogFormVisible = true
        //     this.dialogTitle = '编辑'
        // },
        // // 删除
        // del (row) {

        // },
        // // 添加
        // add () {
        //     this.dialogTitle = '添加'
        //     this.dialogFormVisible = true
        // },
        // // 点击取消
        // cancel() {
        //     this.dialogFormVisible = false
        // },
        // // 提交
        // submitForm() {
        //     this.dialogFormVisible = false
        // },
        // 获取经纬度
        // getLatLng() {
        //     this.$getLocaion(returnCitySN["cip"]).then((res) => {
        //         let temp = res.data.location.split(',')
        //         this.formData.longitude=temp[0]//经度
        //         this.formData.latitude=temp[1]//纬度
        //     });
        // }
    }
}
</script>
<style lang="scss" scoped>
.block {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.red {
    color: red;
}

.gray {
    color: rgb(10, 184, 10);
}

.searchBox {
    display: flex;

    span {
        width: 50px;
        line-height: 40px;
        text-align: center;
    }

    .search {
        width: 30%;
    }
}

.searchMain {
    height: 80px;
}
</style>
